<template>
	<div class="page_wrap">
		<div class="main" v-if="!edit_goods">
			<header class="header">
				<div class="box">
					<el-button size="mini" type="success" icon="el-icon-plus" @click="operationFN('add')">新增商品</el-button>
				</div>
				<div class="box">
					<el-input clearable size="mini" v-model="inputVal" placeholder="请输入内容" style="width: 200px;"></el-input>
				</div>
				<div class="box">
					<el-input clearable size="mini" v-model="inputVal" placeholder="请输入内容" style="width: 200px;"></el-input>
				</div>
				<div class="box">
					<el-input clearable size="mini" v-model="inputVal" placeholder="请输入内容" style="width: 200px;"></el-input>
				</div>
				<div class="box">
					<el-button size="mini" type="primary" icon="el-icon-search">搜索</el-button>
				</div>
			</header>

			<div class="list_content" v-if="!edit_goods">
				<el-table :data="tableData" :height="tabHeight" border style="width: 100%" :row-class-name="tableRowClassName">
					<el-table-column prop="id" label="ID" align="center" width="180"></el-table-column>
					<el-table-column prop="" label="商品图片" align="center" width="180">
						<template slot-scope="scope">
							<div class="pic_box">
								<div class="pic">
									<img src="../../assets/img/public/login-bg.jpg" />
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="名称" align="center" width=""></el-table-column>
					<el-table-column prop="address" align="center" label="地址"></el-table-column>
					<el-table-column fixed="right" align="center" label="操作" width="200">
						<template slot-scope="scope" align="center">
							<!--<el-button type="text" size="small">查看</el-button>
							<el-button type="text" size="small">编辑</el-button>-->
							<el-button type="text" size="small" @click="delFN(scope.row, scope.$index)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!--分页-->
			<div class="el_pagination_box">
				<el-pagination :page-size="pageSize" :page-sizes="[10, 20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :current-page="page" :total="total" @current-change="handleCurrentChange" @size-change="sizeChange"></el-pagination>
			</div>
		</div>
		<GoodsOperation v-if="edit_goods" @operationFN="operationFN"></GoodsOperation>
	</div>
</template>

<script>
	import GoodsOperation from '@/components/goodsOperation/goodsOperation';

	export default {
		data() {
			return {
				page: 1, //当前页
				pageSize: 10, //每页大小
				total: 0, //数据总数
				tabHeight: 400,

				tableData: [],
				edit_goods: false,
				inputVal: '',
			}
		},
		components: {
			GoodsOperation,
		},
		created() {},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.tableData = [{
					id: '0001',
					name: '零食',
					address: '上海市普陀区金沙江路 1518 弄',
				}, {
					id: '0002',
					name: '饮料',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					id: '0003',
					name: '衣服',
					address: '上海市普陀区金沙江路 1518 弄',
				}, {
					id: '0004',
					name: '日用品',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					id: '0005',
					name: '酒水',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					id: '0006',
					name: '百货',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					id: '0007',
					name: '香水',
					address: '上海市普陀区金沙江路 1518 弄'
				}]
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if(rowIndex === 1) {
					return 'warning-row';
				} else if(rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},

			//改变当前页
			handleCurrentChange(v) {
				this.page = v;
			},
			//改变每页条数
			sizeChange(v) {
				this.pageSize = v;
			},
			handleClick(row) {
				console.log(row);
			},
			operationFN(sign = null, item = null) {
				//console.log(sign)
				if(sign == 'add') {
					this.edit_goods = true;
				} else if(sign == 'edit') {

				} else if(sign == 'ok') {
					console.log(item)
					this.edit_goods = false;
				} else {
					this.edit_goods = false;
				}
			},
			//删除
			delFN(item, index) {
				console.log(item, index);
				this.tableData.splice(index, 1);
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import '~assets/css/mixin';
	.page_wrap {
		padding: 10px;
		height: 100%;
	}
	
	header {
		padding: 10px;
		margin: 0 0 10px 0;
		box-sizing: border-box;
		border: 1px solid #eee;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.box {
			margin: 0 20px 0 0;
		}
	}
	
	.main {}
	
	.list_content {
		.pic_box {
			display: flex;
			justify-content: center;
			align-items: center;
			.pic {
				width: 80px;
				height: 80px;
				background: #eee;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					width: 100%;
				}
			}
		}
	}
</style>